<template>
    <div class="menu">
    
    <div class="left">
    <ul>
        <li
          v-for="(item,index) in menus" :key="index">
          <p class="text">{{ item.name }}</p>
        </li>
    </ul>
    </div>
    
    <div class="right">
      <ul>
          <li class="cate" v-for="(item,index1) in menus ":key="index1">
              <h4 class="title">{{ item.name }}</h4>
              <ul class="item">
                 <li v-for="(item,index2) in item.children" :key="index2">
                    <img :src="item.picture" :alt="item.name">
                    <span>{{ item.name }}</span>
                 </li>
    
              </ul>
          </li>
      </ul>
    
    </div>
    </div>
    </template>
    
    <style lang="scss" scoped>
    .menu {
        display: flex;
        position: absolute;
        text-align: center;
        top: 46px;
        bottom: 50px;
        width: 100%;
        overflow: hidden;
    
        .left{
            flex: 0 0 80px;
    
            width: 80px;
            background-color: #f3f3f7;
            line-height: 55px;
    
            li{
                height: 55px;
                
                border-bottom: 1px solid #e1e1e1;
           
            }
    
        }
       .right{
        flex:1;
        background-color: #ffffff;
        .cate{
            height: 100%;
            .title{
               margin: 0;
               text-align: left;
               font-size: 14px;
               color: #333333;
               font-weight: bold;
               margin: 10px;
            }
            .item{
                margin: 7px 10px 10px;
                display: flex;
                overflow: hidden;
                flex-flow: row wrap;
                li{
                    width: 33.3%;
                    img{
                        width: 70px;
                        height: 70px;
                    }
                    span{
                        display: inline-block;
                        font-size: 14px;
                        color: #333333;
                    }
                }
            }
        }
       }
    
    
    }
    </style>
    
    <script setup>
    import { ref } from "vue";
    const categoryList = ref([
      {
        id: 1,
        name: "潮流女装",
        picture: "/",
        pid: 0,
      },
      {
        id: 2,
        name: "羽绒服",
        picture: "/images/category/clothes/jackets.png",
        pid: 1,
      },
      {
        id: 3,
        name: "毛呢大衣",
        picture: "/images/category/clothes/overcoat.jpg",
        pid: 1,
      },
      {
        id: 4,
        name: "连衣裙",
        picture: "/images/category/clothes/dress.png",
        pid: 1,
      },
      {
        id: 5,
        name: "食品",
        picture: "/",
        pid: 0,
      },
      {
        id: 6,
        name: "休闲零食",
        picture: "/images/category/foods/biscuit.jpg",
        pid: 5,
      },
      {
        id: 7,
        name: "生鲜果蔬",
        picture: "/images/category/foods/tomato.jpg",
        pid: 5,
      },
      {
        id: 8,
        name: "饮料汽水",
        picture: "/images/category/foods/drinks.jpg",
        pid: 5,
      },
      {
        id: 9,
        name: "四季茗茶",
        picture: "/images/category/foods/tea.jpg",
        pid: 5,
      },
      {
        id: 10,
        name: "粮油调味",
        picture: "/images/category/foods/oil.jpg",
        pid: 5,
      },
      {
        id: 11,
        name: "珠宝配饰",
        picture: "/",
        pid: 0,
      },
      {
        id: 12,
        name: "时尚饰品",
        picture: "/images/category/jewelry/ornaments.jpg",
        pid: 11,
      },
      {
        id: 13,
        name: "品质手表",
        picture: "/images/category/jewelry/watch.jpg",
        pid: 11,
      },
      {
        id: 14,
        name: "DIY饰品",
        picture: "/images/category/jewelry/diy.jpg",
        pid: 11,
      },
      {
        id: 15,
        name: "日用百货",
        picture: "/",
        pid: 0,
      },
      {
        id: 16,
        name: "居家日用",
        picture: "/images/category/store/towel.png",
        pid: 15,
      },
      {
        id: 17,
        name: "个人清洁",
        picture: "/images/category/store/paper.png",
        pid: 15,
      },
      {
        id: 18,
        name: "盆碗碟筷",
        picture: "/images/category/store/bowl.png",
        pid: 15,
      },
      {
        id: 19,
        name: "茶杯茶具",
        picture: "/images/category/store/cup.png",
        pid: 15,
      },
      {
        id: 20,
        name: "收纳整理",
        picture: "/images/category/store/box.png",
        pid: 15,
      },
      {
        id: 21,
        name: "手机数码",
        picture: "/",
        pid: 0,
      },
      {
        id: 22,
        name: "手机",
        picture: "/images/category/phone/phone.png",
        pid: 21,
      },
      {
        id: 23,
        name: "笔记本",
        picture: "/images/category/phone/computer.png",
        pid: 21,
      },
      {
        id: 24,
        name: "数码配件",
        picture: "/images/category/phone/headset.png",
        pid: 21,
      },
      {
        id: 25,
        name: "平板",
        picture: "/images/category/phone/flat.png",
        pid: 21,
      },
      {
        id: 26,
        name: "相机",
        picture: "/images/category/phone/camera.png",
        pid: 21,
      },
      {
        id: 27,
        name: "户外运动",
        picture: "/",
        pid: 0,
      },
      {
        id: 28,
        name: "运动鞋",
        picture: "/images/category/motion/shoes.jpg",
        pid: 27,
      },
      {
        id: 29,
        name: "球类运动",
        picture: "/images/category/motion/ball.png",
        pid: 27,
      },
      {
        id: 30,
        name: "垂钓用品",
        picture: "/images/category/motion/fishingrod.png",
        pid: 27,
      },
      {
        id: 31,
        name: "运动服",
        picture: "/images/category/motion/clothes.png",
        pid: 27,
      },
      {
        id: 32,
        name: "骑行装备",
        picture: "/images/category/motion/bicycle.png",
        pid: 27,
      },
      {
        id: 33,
        name: "电动车",
        picture: "/images/category/motion/vehicle.png",
        pid: 27,
      },
    ]);
        
    
    
    
    
    
    const convertToTree = (data) => {
         let treeData = [];
         let map = {};
         for (const item of data){
             map[item.id] = {...item ,children:[]}
    
         }
         for (const item of data) {
            const node = map[item.id];
            if(item.pid === 0){
       
                treeData.push(node)
            }else{
                const parent = map[item.pid];
                parent.children.push(node);
            }
         }
         return treeData;
    
    }
    
    const menus = ref([]);
    
    
    
    const loadCategoryList = () => {
        const treeData = convertToTree(categoryList.value);
        console.log(treeData);
        menus.value = treeData;
    }
    
    
    loadCategoryList();
    
    </script>